<template>
  <div class="app" id="bu23">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3>推广账户</h3>
            </div>
            <div class="sdeio">
              <div class="klist">
                <span>推广金额</span>
                <span>
                  <h3>1200</h3>
                </span>
元
              </div>
              <div class="klist">
                <span class="sp1">可使用推广金额</span>
                <span class="sp2">
                  <h3>1200</h3>
                </span>元
                <div class="butt" @click="dialogVisible = true">提现</div>
              </div>
              <div class="klist">
                <span>返现金额</span>
                <span>
                  <h3>1200</h3>
                </span>元
                <div class="butt" @click="dialogVisible = true">提现</div>
              </div>
            </div>
            <div>
              <el-tabs type="border-card">
                <el-tab-pane label="推广记录查询">
                  <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}">
                    <el-table-column prop="date" label="购买时间" width="120"></el-table-column>
                    <el-table-column prop="name" label="推广类型"></el-table-column>
                    <el-table-column prop="province" label="推广时间"></el-table-column>
                    <el-table-column prop="city" label="推广时长"></el-table-column>
                    <el-table-column prop="address" label="推广位置"></el-table-column>
                    <el-table-column fixed="right" label="状态">
                      <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">审核通过</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <!-- <el-tab-pane label="返现查询"></el-tab-pane> -->
              </el-tabs>
            </div>
            <businessF />
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div class="lheds">提示</div>
      <div class="lbody">
        <div class="lbodyb" :class="{lactive:1==lshuj}" @click="lxuanz(1)">提现到银行卡</div>
        <div class="lbodyb" :class="{lactive:2==lshuj}" @click="lxuanz(2)">提现到微信</div>
      </div>
      <el-button
        style="margin: 0 auto;display: block;"
        type="primary"
        @click="dialogVisible = false"
      >确 定</el-button>
      <div style="height:15px"></div>
    </el-dialog>
    <!-- 提现到微信 -->
    <el-dialog :visible.sync="dialogVisiblewx" width="30%" :before-close="handleClosewx">
      <div class="lheds">提现到微信</div>
      <div class="lbodywx">
        <el-row>
          <el-col :span="6">提现金额：</el-col>
          <el-col :span="12">
            <el-input type="text" :placeholder="holder" class="lelinput"></el-input>
          </el-col>
          <el-col :span="6">全部提现</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">支付密码：</el-col>
          <el-col :span="12">
            <el-input type="text" class="lelinput"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="6" :span="12">将根据提交信息预计到账时间</el-col>
        </el-row>
      </div>
      <el-button
        style="margin: 0 auto;display: block;"
        type="primary"
        @click="dialogVisiblewx = false"
      >确 定</el-button>
      <div style="height:15px"></div>
    </el-dialog>
    <!-- 提现到银行卡 -->
    <el-dialog :visible.sync="dialogVisibleyh" width="30%" :before-close="handleCloseyhk">
      <div class="lheds">提现到银行卡</div>
      <div class="lbodywx">
        <div class="lyhk">
          <div class="lyhkb">
            <div class="lyhkbb">
              <p>中国农业银行</p>
              <p style="text-align: center;">622 **** **** 1546</p>
              <p style="text-align: right;">解除绑定</p>
            </div>
          </div>
        </div>
        <el-row>
          <el-col :span="6">提现金额：</el-col>
          <el-col :span="12">
            <el-input type="text" class="lelinput"></el-input>
          </el-col>
          <el-col :span="6">全部提现</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">支付密码：</el-col>
          <el-col :span="12">
            <el-input type="text" class="lelinput"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="6" :span="12">将根据提交信息预计到账时间</el-col>
        </el-row>
      </div>
      <el-button
        style="margin: 0 auto;display: block;"
        type="primary"
        @click="dialogVisiblewx = false"
      >确 定</el-button>
      <div style="height:15px"></div>
    </el-dialog>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      lshuj: 0,
      holder: "",
      dialogVisible: false,
      dialogVisiblewx: false,
      dialogVisibleyh: false,
      tableData: []
    };
  },
  methods: {
    lxuanz(ax) {
      this.lshuj = ax;
      if (ax == 2) {
        this.dialogVisiblewx = true;
      } else if (ax == 1) {
        this.dialogVisibleyh = true;
      }
    },
    handleClosewx(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleCloseyhk(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>
<style>
#bu23 /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}

#bu23 .back {
  background-color: #f06048;
}
#bu23 .pxes {
  height: 15px;
}
#bu23 .back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
}
#bu23 .listneo {
  width: 1161px;
  height: 1227px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
#bu23 .conres {
  height: 1227px;
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}
#bu23 .conres .ra {
  font-size: 20px;
  color: #313131;
  margin-top: 15px;
}
#bu23 .conres h4 {
  font-family: SourceHanSansCN-Bold;
  font-size: 20px;
  font-weight: 550;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #313131;
  text-align: center;
}
#bu23 .conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  border-bottom: 1px solid #cecece;
  padding-bottom: 10px;
}
#bu23 .sdeio {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
#bu23 .sdeio .klist {
  width: 400px;
  margin-left: 40px;
  display: flex;
  margin-top: 25px;
  margin-bottom: 20px;
}
#bu23 .sdeio .klist span {
  font-size: 18px;
  line-height: 20px;
}
#bu23 .sdeio .klist h3 {
  font-size: 26px;
  color: #f06048;
  margin-left: 10px;
  margin-right: 10px;
}
#bu23 .sdeio .klist .butt {
  height: 20px;
  width: 70px;
  background-color: #f06048;
  color: #fff;
  border-radius: 3px;
  line-height: 20px;
  text-align: center;
  margin-left: 20px;
}

#bu23 .el-dialog__header {
  padding: 0px !important;
}
#bu23 .el-dialog__body {
  padding: 0px !important;
}
#bu23 .lheds {
  width: 100%;
  height: 60px;
  background-color: rgb(240, 96, 72);
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}
#bu23 .lbody {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
#bu23 .lbodyb {
  width: 40%;
  border: solid 1px rgb(160, 160, 160);
  height: 76px;
  line-height: 76px;
  text-align: center;
  margin: 30px 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  color: rgb(160, 160, 160);
}
#bu23 .lactive {
  border: solid 1px rgb(240, 96, 72);
  color: rgb(240, 96, 72);
}
#bu23 .lbodywx {
  width: 80%;
  margin: 0 auto;
}
#bu23 .lbodywx .el-input__inner {
  height: 20px;
}
</style>